/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-21 11:28:36
 * @Description: 首页-应用工具-外资企业分布
 */
import React from "react";
import "./style.scss";
// import { message } from "antd";
import { observer, inject } from "mobx-react";
import echarts from "echarts";
// import axios from "axios";

@inject("ForeignEnterprisesDistributionStore")
@observer
class ForeignEnterprisesDistribution extends React.Component {
    state = {
        mapName: "chongqing",
        mapChartData: null
    };
    componentDidMount() {
        const { mapName } = this.state;
        this.props.ForeignEnterprisesDistributionStore.getListData();

        const myChart = echarts.init(document.getElementById("FEDMapChart"));

        myChart.on("click", function(params) {
            // 后续再添加点击事件
            console.log(params);
        });

        window.onresize = () => {
            myChart.resize();
        };

        this.registerMap(mapName, () => {
            this.setState(
                {
                    myChart
                },
                () => {
                    this.renderMap();
                }
            );
        });
    }

    registerMap(mapName, callback) {
        require.ensure([], () => {
            const url = `/maps/${mapName}.json`;
            fetch(url)
                .then(res => res.json())
                .then(data => {
                    echarts.registerMap(mapName, data);
                    this.setState(
                        {
                            mapChartData: data
                        },
                        () => {
                            callback();
                        }
                    );
                });
        });
    }

    renderMap() {
        const { mapName, myChart } = this.state;
        const option = {
            series: [
                {
                    type: "map",
                    roam: true,
                    map: mapName,
                    itemStyle: {
                        areaColor: "#354270",
                        borderWidth: 2,
                        borderColor: "#212734"
                    },
                    label: {
                        show: true,
                        color: "#8893A7"
                    },
                    emphasis: {
                        label: {
                            show: true,
                            color: "#fff"
                        },
                        itemStyle: {
                            areaColor: "#1AA3FF",
                            borderWidth: 0
                        }
                    }
                }
            ]
        };

        myChart.setOption(option);
    }

    render() {
        const { listData } = this.props.ForeignEnterprisesDistributionStore;
        return (
            <div className="foreign-enterprises-distribution">
                <div className="fed-map-chart">
                    <div className="map-chart" id="FEDMapChart" style={{ height: "calc(100vh - 70px)", width: 1100 }} />
                    <div className="notice">提示：点击查看各区域投资分布</div>
                </div>
                <div className="fed-right-list">
                    <table>
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>国家</th>
                                <th>数量</th>
                                <th>占比</th>
                            </tr>
                        </thead>
                        <tbody>
                            {listData.length > 0 &&
                                listData.map((d, i) => (
                                    <tr key={`fed-list-${i}`}>
                                        <td>{i + 1}</td>
                                        <td>{d.country}</td>
                                        <td>{d.value}</td>
                                        <td>{d.proportion}%</td>
                                    </tr>
                                ))}
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}

export default ForeignEnterprisesDistribution;
